<!--
* @author wn
* @date 2022/09/23 14:24:29
* @description: 订单详情 中  步长组件
!-->
<template>
	<!-- 如果为6就代表取消，取消就从头开始，就是就是当前状态 -->
	<xtx-step
		v-if="order"
		:active="order.orderState === 6 ? 1 : order.orderState"
	>
		<xtx-step-item
			v-for="item in list"
			:key="item.title"
			:title="item.title"
			:time="order[item.time]"
		/>
	</xtx-step>
</template>
<script>
export default {
	name: 'DetailStep',
	props: {
		order: {
			type: Object,
			default: () => ({}),
		},
	},
	setup() {
		// 这里自定义 xtx-step-item 内  title 与 time
		const list = [
			{ title: '提交订单', time: 'createTime' },
			{ title: '付款成功', time: 'payTime' },
			{ title: '商品发货', time: 'consignTime' },
			{ title: '确认收货', time: 'endTime' },
			{ title: '订单完成', time: 'evaluationTime' },
		]
		return { list }
	},
}
</script>
<style scoped lang="less">
.xtx-step {
	padding: 40px 20px;
}
</style>
